import React, { useEffect, useState } from 'react';
import {
  Input,
  Select,
  Button,
  Table,
  InputNumber,
  Switch,
  Space,
  Form,
  Modal,
  message,
} from 'antd';
const { Option } = Select;
import { DownOutlined } from '@ant-design/icons';
import './index.css';
import { getDept, delDept, addDept } from '@/services/Userinfo/dept';

function Dept() {
  const [Department, setDepartment] = useState([]);
  const [checkStrictly, setCheckStrictly] = useState(false);
  const [addvisible, setaddvisible] = useState(false);
  const [form] = Form.useForm();
  //   获取部门列表
  const getDepts = async () => {
    const res = await getDept();
    console.log(res);
    setDepartment(res.list);
  };
  //   删除部门
  const delDepts = async (id) => {
    const res = await delDept(id);
    message.success('删除成功');
    getDepts();
  };
  //   新增部门modal框
  const addModal = (record) => {
    console.log(record);
    form.setFieldsValue({ pid: record.id });
    setaddvisible(true);
  };
  useEffect(() => {
    getDepts();
  }, []);
  // 隐藏model
  const hideModal = () => {
    setaddvisible(false);
    form.resetFields();
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  // 添加按钮
  const onaddFinish = async (values) => {
    setaddvisible(false);
    const res = await addDept(values);
    form.resetFields();
    getDepts();
    message.success('添加成功');
  };
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: (record, selected, selectedRows) => {
      console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      console.log(selected, selectedRows, changeRows);
    },
  };
  const columns = [
    {
      title: '部门名称',
      dataIndex: 'department_name',
      key: 'name',
    },
    {
      title: '排序',
      dataIndex: 'department_order',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (_, record) => <>{record ? <a>正常</a> : <a>停用</a>}</>,
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
    },
    {
      title: '操作',
      dataIndex: 'status',
      render: (_, record) => (
        <>
          <a style={{ margin: '5px' }}>修改</a>
          <a style={{ margin: '5px' }} onClick={() => addModal(record)}>
            新增
          </a>
          <a style={{ margin: '5px', color: 'red' }} onClick={() => delDepts(record.id)}>
            删除
          </a>
        </>
      ),
    },
  ];
  return (
    <>
      <div className="search">
        <div className="searchInput">
          <Input placeholder="请输入部门名称" />
          <Select placeholder="部门状态" allowClear>
            <Option value="lucy">正常</Option>
            <Option value="lu">停用</Option>
          </Select>
        </div>
        <div className="searchButton">
          <Button shape="round" size="large">
            搜索
          </Button>
          <Button shape="round" size="large">
            重置
          </Button>
        </div>
      </div>
      <div className="tab">
        <Table
          columns={columns}
          rowKey="id"
          rowSelection={{ ...rowSelection, checkStrictly }}
          dataSource={Department}
        />
      </div>
      <Modal
        title="添加"
        visible={addvisible}
        // onOk={hideModal}
        onCancel={hideModal}
        okText="确认"
        cancelText="取消"
        footer={null}
      >
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={onaddFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          form={form}
        >
          <Form.Item
            label="父级id"
            name="pid"
            rules={[{ required: true, message: 'Please input your pid!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="部门名称"
            name="department_name"
            rules={[{ required: true, message: 'Please input your department_name!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="负责人"
            name="principal"
            rules={[{ required: true, message: 'Please input your principal!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="部门顺序"
            // name="department_order"
            rules={[{ required: true, message: 'Please input your email!' }]}
          >
            <Form.Item name="department_order" noStyle>
              <InputNumber min={1} max={10} />
            </Form.Item>
          </Form.Item>
          <Form.Item
            label="手机号"
            name="phone"
            rules={[{ required: true, message: 'Please input your email!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="email"
            name="email"
            rules={[{ required: true, message: 'Please input your email!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="status"
            name="status"
            rules={[{ required: true, message: 'Please input your status!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              新增
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
}

export default Dept;
